<template>
	<md-field-group class="foget_view">
		<md-field
				v-model="mobile"
				icon="mobile"
				placeholder="请输入手机号"/>

		<md-field
				v-model="code"
				icon="lock"
				placeholder="请输入短信验证码"
		>
			<div slot="rightIcon" @click="getCode" class="getCode red">
				<countdown v-if="counting" :time="60000" @end="countdownend">
					<template slot-scope="props">{{ +props.seconds || 60 }}秒后获取</template>
				</countdown>
				<span v-else>获取验证码</span>
			</div>
		</md-field >
		<md-field
			v-model="password"
			icon="lock"
			:is-error="isErrow"
			placeholder="请输入新密码"/>

		<md-field
			v-model="passwordRepeat"
			type="password"
			icon="lock"
			:is-error="isErrow"
			placeholder="请再次输入密码" />
		<div class="red" v-show="isErrow">两次密码输入不一致</div>

		<div class="foget_submit">
			<van-button size="large" type="danger" @click="submitCode">重置</van-button>
		</div>
	</md-field-group>
</template>

<script>
import field from '@/components/field/';
import fieldGroup from '@/components/field-group/';
import { authRegisterCaptcha, authReset,authLogout} from '@/api/api';
import { mobileReg2 } from '@/utils/validate';
export default {
  data() {
    return {
      isErrow: false,
      password: '',
      passwordRepeat: '',
      mobile: '',
      counting: false,
      code: '',
    };
  },
  methods: {
    submitCode() {
        if(this.mobile === ''){
            return
        }
        if(!mobileReg2.test(this.mobile)){
            this.mobile = ''
            this.$toast.fail('手机号码错误！');
            return
        }
        if(this.passwordRepeat!=this.password){
            this.isErrow = true;
            return
		}
        authReset({
            password: this.password,
            mobile: this.mobile,
            code: this.code
        }).then(() => {
                this.$dialog.alert({ message: '保存成功, 请重新登录.' })
                authLogout();
         });
	},
      countdownend() {
          this.counting = false;
      },
	getCode() {
          this.counting = true;
          let data = {
              mobile: this.mobile
          };
          authRegisterCaptcha(data).then(res => {
              this.counting = true;
          }).catch(error => {
              this.$toast.fail(error.data.errmsg);
              this.counting = true;
          });
      },
  },

  components: {
    [field.name]: field,
    [fieldGroup.name]: fieldGroup
  }
};
</script>

<style lang="scss" scoped>
div.foget_view {
  background-color: #fff;
  padding-top: 30px;
}

div.foget_submit {
  padding-top: 30px;
  padding-bottom: 20px;
}
</style>
